<template>
  <!--  -->
  <scroll-view
    class="tt-refresh-box"
    scroll-y
    :refresher-enabled="isRefresher"
    scroll-anchoring
    :show-scrollbar="false"
    :refresher-triggered="refresherTriggered"
    @refresherrefresh="refresherStart"
    @scrolltolower="scrolltolower"
  >
    <slot></slot>

    <div
      v-show="isLoadEnd && !refresherTriggered && list.length > 0"
      class="no-more flex"
    >
      没有更多了~
    </div>
    <div
      v-show="isLoadEnd && !refresherTriggered && !list.length"
      class="no-data flex"
    >
      暂无数据
    </div>
  </scroll-view>
</template>

<script setup>
const props = defineProps({
  isLoadEnd: {
    default: false,
  },
  isRefresher: {
    default: false,
  },
  list: {
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(["refresherStart", "scrolltolower"]);

let refresherTriggered = $ref(false);

//下拉开始事件
function refresherStart() {
  if (refresherTriggered) {
    return;
  }
  refresherTriggered = true;
  emits("refresherStart");
}

//下拉结束事件
function refresherEnd() {
  refresherTriggered = false;
}

//触底事件
function scrolltolower() {
  emits("scrolltolower");
}

defineExpose({ refresherEnd });
</script>
<style lang="scss" scoped>
.tt-refresh-box {
  height: 100%;
  .no-more {
    font-size: 28rpx;
    color: #999;
    padding: 20px 0;
  }
  .no-data {
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
}
</style>
